import './tuijian.scss'
import { Link, Route, Switch } from 'react-router-dom';
import React, { Component, Suspense, lazy } from 'react';
const Advert = lazy(() => import('../../components/advert/advert'));
const Hot = lazy(() => import('../../pages/hot/hot'));


export default class TuiJian extends Component {
    constructor(props: any) {
        super(props);
    }
    componentWillMount() {

    }
    componentDidMount() {
        // console.log(this.props)
    }
    render() {
        return (
            <div className="tuijan">
                <div className="con w960">
                    <div className="list">
                        {/* 小标签 */}
                        <ul className="lititleTag">
                            <li className="active line"><Link to="/home/tuijian/1">热门</Link></li>
                            <li className="line"><Link to="/home/tuijian/2">最新</Link></li>
                            <li><Link to="/home/tuijian/3">热榜</Link></li>
                        </ul>
                        {/* 内容 */}
                        <div className="listCon">
                            <Suspense fallback={<div className="loading">加载中....</div>}>
                                <Switch>
                                    <Route path={`/home/tuijian/:num`}>
                                        <Hot />
                                    </Route>

                                </Switch>
                            </Suspense>
                        </div>
                    </div>
                    {/* 右边的广告 */}
                    <Advert />
                </div>
            </div>
        )
    }
}